<template>
  <div>
    <!--    搜索框-->
    <div style="padding: 20px 0">
      <el-input style="width: 400px;left: calc( 50% - 200px)"
                placeholder="搜点什么？"
                v-model="input">
        <el-button @click="findArticles()" style="color: #409EFF" slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <Adaption>
      <el-empty v-if="articles.length==0" description="没有你想要的内容哦！"></el-empty>
      <!-- 帖子开始-->
      <el-card class="el-card" shadow="never"
               v-for="article in articles" :key="article.id"
               style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
        <!--标题-->
        <router-link :to="{path:'/index/article',query:{articleId:article.id}}"><h3>{{ article.title }}</h3>
        </router-link>
        <span style="line-height: 36px;color: #908d8d">{{ article.date }}</span>
        <!--正文-->
        <p v-html="article.content">
        </p>
        <!--点赞,评论,分享及收藏-->
        <ItemBottom :uid="uid" :articleId="article.id" :stars="article.likeNum" :commentNum="article.commentNum"
                    :view="article.view" :is-like="article.isLike?true:false"
                    :is-collect="article.isCollect?true:false"></ItemBottom>
      </el-card>
      <!-- 帖子结束-->
      <br>
      <!-- 分页开始-->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>
      <!-- 分页结束-->
    </Adaption>
    <br>
  </div>
</template>

<script>
import ItemBottom from '../forum/article/ArticleBottom'
import Adaption from '../base/Adaption'
import axios from 'axios'
import MyLayout from '../base/MyLayout'

export default {
  name: 'IndexContent',
  data () {
    return {
      input: '',
      articles: [],
      uid: ''
    }
  },
  components: {MyLayout, Adaption, ItemBottom},
  mounted () {
    var isLogin = false
    var uid = ''
    // 获取当前客户端状态及其登录的userId
    this.axios.get('/user/getUser').then(function (res) {
      if (res.data.result) {
        isLogin = true
        uid = res.data.result.id
        this.uid = uid
      }
      if (!isLogin) {
        // 未登录查询
        axios.get('/article/queryAllArticles').then(function (res) {
          console.log(res.data)
          this.articles = res.data.result
        }.bind(this))
      } else {
        // 登录查询，需要带上点赞收藏标记
        axios.get('/article/queryAllArticlesWithUid', {params: {uid: uid}}).then(function (res) {
          console.log(res.data)
          this.articles = res.data.result
        }.bind(this))
      }
    }.bind(this))
  },
  methods: {
    findArticles: function () {
      // 动态清空数组
      this.articles.length = 0
      this.articles.push({})
      console.log(this.input)
      axios.get('/article/findArticleByStrWithLogin', {params: {uid: this.uid, str: this.input}}).then(function (res) {
        this.articles.push(res.data.result)
        this.articles = this.articles[1]
        console.log(this.articles)
      }.bind(this))
    }
  }
}
</script>
<style>
</style>
